<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性选择器</title>
  <style>
    a[target]{
      background-color: yellow;
    }
    a[target=_blank]{
      background-color: red;
    }
    [title~=flower]{
      border: 5px solid yellow;
    }
    [class|=top]{
      background: yellow;
    }
    [class^="top1"]{
      background: red;
    }
    [class$="test"]{
      background: #4CAF50;
    }
    [class*="con"]{
      background: #1abc9c;
    }
    input[type=text]{
      width: 150px;
      display: block;
      margin-bottom: 10px;
      background-color: yellow;
    }
    input[type=button]{
      width: 120px;
      margin-left: 35px;
      display:block;
    }
  </style>
</head>
<!--
css [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素

css[attribute="value"] 选择器
[attribute="value"] 选择器用于选取带有指定属性和值的元素

css[attribute~="value"] 选择器
css[attribute="value"] 选择器选取属性值包含指定词的元素

CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

CSS [attribute^="value"] 选择器
[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。

CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器选取属性值包含指定词的元素。
提示：值不必是完整单词！
选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value]	[lang|=en]	选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^="https"]	选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]	a[href*="w3school"]	选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。
-->
<body>
<div>
  <h1>css [attribute] 选择器</h1>
  <p>带有target属性的链接获得颜色背景:</p>
  <a href="https://www.w3school.com">w3school.com.cn</a>
  <a href="https://www.disney.com" target="_blank">disney.com</a>
  <a href="https://www.wikipedia.org" target="_top">wikipedia.com</a>
</div>
<br>
<div>
  <h1>css [attribute="value"] 选择器</h1>
  <p>带有target="_block" 的链接获得颜色背景:</p>
  <a href="https://www.w3school.com">w3school.com.cn</a>
  <a href="https://www.disney.com" target="_blank">disney.com</a>
  <a href="https://www.wikipedia.org" target="_top">wikipedia.com</a>
</div>
<br>
<div>
  <h1>css[attribute~="value"]选择器</h1>
  <p>title 属性 包含"flower"的所有图像会有黄色的边框.</p>
  <img src="/img/1.jpg" alt="zi zhi" title="klematis flower" width="150" height="113">
  <img src="/img/3.jpg" alt="zi zhi" title="flower" width="224" height="162">
  <img src="/img/4.jpg" alt="zi zhi" title="tree" width="200" height="358">
</div>
<br>
<div>
  <h1>CSS [attribute|="value"] 选择器</h1>
  <h1 class="top-header">Welcome</h1>
  <p class="top-text">Hello world!</p>
  <p class="topcontent">Are you learning CSS?</p>
</div>
<br>
<div>
  <h1>CSS [attribute^="value"] 选择器</h1>
  <h1 class="top1-header">Welcome</h1>
  <p class="top1-text">Hello world!</p>
  <p class="top1content">Are you learning CSS?</p>
</div>
<div>
  <h1>CSS [attribute$="value"] 选择器</h1>
  <div class="first_test">The first div element.</div>
  <div class="second">The second div element.</div>
  <div class="my-test">The third div element.</div>
  <p class="mytest">This is some text in a paragraph.</p>
</div>
<div>
  <h1>CSS [attribute*="value"] 选择器</h1>
  <div class="first_test">The first div element.</div>
  <div class="second">The second div element.</div>
  <div class="my-test">The third div element.</div>
  <p class="mytest">This is some text in a paragraph.</p>
</div>
<div>
  <h1>添加表单样式</h1>
  <form name="input" action="" method="get">
    Firstname:<input type="text" name="Name" value="Bill" size="20">
    Lastname:<input type="text" name="Name" value="Gates" size="20">
    <input type="button" value="Example Button">
  </form>
</div>
</body>
</html>
